import { Result, Divider } from 'antd-mobile';
import {
  message,
} from 'antd';
import { useRequest } from 'ahooks';
import { useSelector } from 'react-redux';
import { useEffect } from 'react';

import Feedback from './feedback';
import {
  SEND_EMAIL
} from '../../../../constants/api-constants';
import './style.css';

const SuccessResult = () => {
  const {
    mergeUuid
  } = useSelector((
    storeState: QA.ReduxState
  ) => ({
    mergeUuid: storeState.mergeUuid,
  }));

  const {
    run: sendEmail,
  } = useRequest(() => ({
    url: SEND_EMAIL,
    method: 'POST',
    data: {
      mergeUuid,
    }
  }), {
    manual: true,
    onSuccess: (res) => {
      const { hasEmail } = res;

      if (hasEmail) {
        message.success('反馈文档正在发送至您的邮箱，大概需要等待3分钟');
      }
    }
  });

  useEffect(() => {
    sendEmail();
  }, []);

  return (
    <div
      style={{
        padding: '12px'
      }}
    >
      <Result
        status="success"
        title="已完成所有问卷问题"
        description="感谢您的参与"
      />
      <Divider />
      <Feedback mergeUuid={mergeUuid} />
    </div>
  );
};

export default SuccessResult;
